<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			html{
				height: 100%;
			}
			#wrap{
				position: fixed;
				width: 35px;
				height: 100%;
				top: 0;
				right: 0;
				user-select: none;
			}
			.shopCar{
				position: absolute;
				width: 35px;
				height: 100px;
				top: 230px;
				right: 0;
				background-color: #000;
				color: #fff;
				text-align: center;
				cursor: pointer;
				z-index: 3;
			}
			#wrap i{
				display: block;
				width: 35px;
				height: 35px;
			}
			.shopCar i{
				background-image: url(img/1.png);
			}
			.shopCar span{
				display: block;
				font-size: 14px;
			}
			.shopCar:hover{
				background-color: #FF0036;
			}
			.shopCar:hover>i{
				background-image: url(img/2.png);
			}
			.sideTab{
				visibility: hidden;
				position: relative;
				width: 35px;
				height: 100%;
				background-color: #000;
				right: -35px;
				transition: .5s;
			}
			#wrap:hover>.sideTab{
				visibility: visible;
				right: 0;
			}
			.sideTab>.list>li{
				position: absolute;
				background-color: #000;
			}
			.sideTab>.list>li:nth-child(1){
				top: 185px;
				padding-bottom: 10px;
			}
			.sideTab>.list>li:nth-child(1):after{
				content: "";
				position: absolute;
				width: 25px;
				height: 1px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: #666;
				
			}
			.sideTab>.list>li:nth-child(2){
				top: 340px;
			}
			.sideTab>.list>li:nth-child(2):before{
				content: "";
				position: absolute;
				width: 25px;
				height: 1px;
				left: 0;
				right: 0;
				top: -10px;
				margin: auto;
				background-color: #666;
				
			}
			.sideTab>.list>li:nth-child(3){
				top: 380px;
			}
			.sideTab>.list>li:nth-child(4){
				top: 420px;
			}
			.sideTab>.list>li:nth-child(5){
				top: 460px;
			}
			.sideTab>.list>li:nth-child(1) i{
				background-image: url(img/3.png);
			}
			.sideTab>.list>li:nth-child(2) i{
				background-image: url(img/4.png);
			}
			.sideTab>.list>li:nth-child(3) i{
				background-image: url(img/5.png);
			}
			.sideTab>.list>li:nth-child(4) i{
				background-image: url(img/6.png);
			}
			.sideTab>.list>li:nth-child(5) i{
				background-image: url(img/7.png);
			}
			.sideTab>.list>li p{
				visibility: hidden;
				position: absolute;
				top: 0;
				right: 60px;
				width: 90px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				background-color: #494949;
				color: #fff;
				font-size: 12px;
				opacity: 0;
				transition: .5s;
			}
			.sideTab>.list>li p:after{
				content: "";
				position: absolute;
				right: -16px;
				top: 0;
				bottom: 0;
				width: 0;
				height: 0;
				margin: auto;
				border: 8px solid transparent;
				border-left-color: #494949;
			}
			.sideTab>.list>li:hover i{
				background-color: #FF0036;
			}
			.sideTab>.list>li:hover p{
				visibility: visible;
				right: 35px;
				opacity: 1;
			}

		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="shopCar">
				<i></i>
				<span>购</span>
				<span>物</span>
				<span>车</span>
			</div>
			<div class="sideTab">
				<ul class="list">
					<li>
						<a href="">
							<i></i>
							<p>会员权益</p>
						</a>
					</li>
					<li>
						<a href="">
							<i></i>
							<p>我的资产</p>
						</a>
					</li>
					<li>
						<a href="">
							<i></i>
							<p>我的收藏</p>
						</a>
					</li>
					<li>
						<a href="">
							<i></i>
							<p>我看过的</p>
						</a>
					</li>
					<li>
						<a href="">
							<i></i>
							<p>我要充值</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
